/* ==========================================================================
   Pakistan Day (14 August) — border decoration system for dawateislami.net/pk
   Drop-in, additive only. Nothing here touches existing site styles.
   Everything lives inside .pd14 (fixed overlay, pointer-events:none).
   ========================================================================== */

:root{
  --pd-green:#01411C;
  --pd-green-lit:#006600;
  --pd-white:#FFFFFF;
  --pd-gold:#C9A227;
}

@font-face {
  font-family: 'Mehr_Nastaliq_Web_3';
  src: url(../fonts/Mehr_Nastaliq_Web_3.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

.ur-text {
  font-family: Mehr_Nastaliq_Web_3 !important;
}

/* ---------- page loader ---------- */
.di-loader{position:fixed;inset:0;background:#fff;z-index:2147483647;
  display:grid;place-items:center;transition:opacity .5s ease;}
.di-loader.hide{opacity:0;pointer-events:none;}
.di-loader-scene{position:relative;min-width:min(84vw,570px);padding:75px 32px 27px;text-align:center;}
.di-loader-message{position:relative;z-index:2;margin:0;color:#193a27;font-size:clamp(26px,3.5vw,46px);line-height:2;text-align:center;
  background:linear-gradient(100deg,#01411c 15%,#c9a227 43%,#01411c 68%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:di-message-shimmer 2.8s ease-in-out infinite,di-message-float 1.9s ease-in-out infinite;}
.di-loader-line{display:block;width:260px;height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#c9a227,transparent);animation:di-line 1.7s ease-in-out infinite;}
.di-loader-crescent{position:absolute;top:4px;left:50%;width:53px;height:53px;border-radius:50%;background:#01411c;transform:translateX(-50%);}
.di-loader-crescent::after{content:"";position:absolute;width:53px;height:53px;border-radius:50%;background:#fff;left:15px;top:-8px;}
.di-loader-star{position:absolute;color:#c9a227;font-size:18px;animation:di-star 1.8s ease-in-out infinite;}
.di-loader-star--one{top:10px;left:calc(47% + 25px);}.di-loader-star--two{top:50px;left:calc(50% - 78px);font-size:12px;animation-delay:-.9s;}
.di-loader-flag{position:absolute;top:4px;left:calc(50% + 72px);width:75px;height:55px;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,0,0,.15));}
.di-loader-flag path:not(:first-child),.di-loader-flag circle{transform-origin:12px 31px;animation:di-flag-wave 1.75s ease-in-out infinite;}

/* ---------- overlay shell ---------- */
.pd14{
  position:fixed;
  inset:0;
  z-index:2147483000;      /* above page, below nothing interactive */
  pointer-events:none;      /* never blocks a click, link or button */
  overflow:hidden;
  contain:strict;           /* isolate paint/layout for performance */
  height: 100vh;
}
.pd14 *{pointer-events:none;box-sizing:border-box;}

/* ---------- soft green edge light ---------- */
.pd-glow{position:absolute;will-change:opacity;}
.pd-glow--l,.pd-glow--r{top:0;bottom:0;width:clamp(40px,6vw,92px);
  animation:pd-glow 7s ease-in-out infinite;}
.pd-glow--l{left:0;background:linear-gradient(to right,rgba(1,65,28,.30),rgba(0,102,0,.10) 45%,transparent);}
.pd-glow--r{right:0;background:linear-gradient(to left,rgba(1,65,28,.30),rgba(0,102,0,.10) 45%,transparent);animation-delay:-3.5s;}
.pd-glow--t{left:0;right:0;top:0;height:clamp(46px,7vh,86px);
  background:linear-gradient(to bottom,rgba(1,65,28,.26),transparent);
  animation:pd-glow 9s ease-in-out infinite;}
.pd-glow--b{left:0;right:0;bottom:0;height:clamp(34px,5vh,64px);
  background:linear-gradient(to top,rgba(1,65,28,.20),transparent);
  animation:pd-glow 11s ease-in-out infinite;animation-delay:-5s;}

/* hairline frame + inner gold thread */
.pd-frame{position:absolute;inset:0;border:1px solid rgba(1,65,28,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 60px rgba(0,102,0,.16);}
.pd-frame::after{content:"";position:absolute;inset:6px;
  border:1px solid rgba(201,162,39,.28);border-radius:6px;}

/* flowing light along the vertical edges */
.pd-rail{position:absolute;top:0;bottom:0;width:2px;opacity:.55;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.9) 8%,rgba(0,102,0,.9) 18%,transparent 34%,transparent 100%);
  background-size:100% 46vh;animation:pd-flow 14s linear infinite;will-change:background-position;}
.pd-rail--l{left:3px;}
.pd-rail--r{right:3px;animation-delay:-7s;}

/* ---------- top flying jhandiyan: placed on both sides of the khutba image ---------- */
.pd-top-bunt{position:absolute;height:38px;
  display:flex;justify-content:space-between;align-items:flex-start;
  border-top:2px solid rgba(1,65,28,.70);filter:drop-shadow(0 2px 3px rgba(0,0,0,.14));}
.pd-top-bunt--l{left:6px;top:-6px !important;}
.pd-top-bunt--r{right:-8px;top:-6px !important;}
.pd-top-bunt .pd-tri{width:21px;height:18px;margin-top:2px;transform-origin:top center;
  clip-path:polygon(0 0,100% 0,50% 100%);animation-name:pd-top-sway;}
.pd-top-bunt .pd-tri:nth-child(odd){margin-top:5px;animation-delay:-.8s;}
.pd-top-bunt .pd-tri:nth-child(3n){animation-delay:-1.8s;}

/* ---------- bunting / jhandiyan ----------
   Hung VERTICALLY inside the outer 30px of each edge, from the top corner down.
   A horizontal top bunting would overlap the utility bar's links, so the string
   turns the corner instead and stays entirely outside the content column. */
.pd-bunt{position:absolute;top:7px;bottom:7px;width:36px;display:flex;
  flex-direction:column;justify-content:space-around;
  transform-origin:top center;animation:pd-sway 6.5s ease-in-out infinite;}
.pd-bunt--l{left:-5px;align-items:flex-start;}
.pd-bunt--r{right:-5px;align-items:flex-end;animation-delay:-3s;}
.pd-bunt::before{content:"";position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(201,162,39,.75),rgba(201,162,39,.10));}
.pd-bunt--l::before{left:6px;}
.pd-bunt--r::before{right:6px;}
.pd-tri{width:23px;height:17px;
  transform-origin:left center;animation:pd-sway 3.4s ease-in-out infinite;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));}
.pd-bunt--l .pd-tri{margin-left:7px;clip-path:polygon(0 0,0 100%,100% 50%);}
.pd-bunt--r .pd-tri{margin-right:7px;transform-origin:right center;
  clip-path:polygon(100% 0,100% 100%,0 50%);}
.pd-tri:nth-child(odd){background:linear-gradient(180deg,#046B2C,var(--pd-green));}
.pd-tri:nth-child(even){background:linear-gradient(180deg,#fff,#EAF3EC);}
.pd-tri:nth-child(2){animation-delay:-.4s}.pd-tri:nth-child(3){animation-delay:-.8s}
.pd-tri:nth-child(4){animation-delay:-1.2s}.pd-tri:nth-child(5){animation-delay:-1.6s}
.pd-tri:nth-child(6){animation-delay:-2s}.pd-tri:nth-child(7){animation-delay:-2.4s}
.pd-tri:nth-child(8){animation-delay:-2.8s}

/* ---------- edge flags ---------- */
.pd-flag{position:absolute;display:flex;align-items:flex-start;gap:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.16));will-change:transform;}
.pd-flag--l{left:-2px;}
.pd-flag--r{right:35px;transform:scaleX(-1);transform-origin:right top;}
.pd-pole{width:3px;height:46px;border-radius:2px;
  background:linear-gradient(180deg,var(--pd-gold),rgba(201,162,39,.25));}
.pd-flag svg{width:34px;height:auto;transform-origin:left center;
  animation:pd-wave-left 2.9s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform,filter;}
/* Mirror the entire right-hand flag unit. This keeps the pole and white hoist
   stripe together, without an SVG transform pushing the cloth outside the edge. */
.pd-flag--l.pd-a2 svg,.pd-flag--r.pd-a2 svg{animation-delay:-1.5s}
.pd-flag--l.pd-a3 svg,.pd-flag--r.pd-a3 svg{animation-delay:-3s}

/* ---------- sparkles ---------- */
.pd-spark{position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.55),0 0 12px 4px rgba(0,102,0,.35);
  opacity:0;animation:pd-spark 9s ease-in-out infinite;will-change:transform,opacity;}
.pd-spark.pd-g{background:#8FD4A4;box-shadow:0 0 6px 2px rgba(0,102,0,.5);}

.pd-top-bunt.pd-top-bunt--l > .pd-tri:first-child {     visibility: hidden; }
.pd-bunt.pd-bunt--r .pd-tri:first-child {     visibility: hidden; }

/* ---------- keyframes (all slow, no flashing, no hue shifts) ---------- */
@keyframes pd-glow{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes di-message-shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes di-message-float{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes di-line{0%,100%{transform:scaleX(.65);opacity:.45}50%{transform:scaleX(1);opacity:1}}
@keyframes di-star{0%,100%{transform:scale(.7) rotate(0);opacity:.45}50%{transform:scale(1.15) rotate(18deg);opacity:1}}
@keyframes di-flag-wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-5deg) scaleX(.94)}}
@keyframes pd-flow{0%{background-position:0 -46vh}100%{background-position:0 100vh}}
@keyframes pd-sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
@keyframes pd-top-sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(2px)}}
/* A quick, uneven flutter reads as cloth in wind instead of a static badge. */
@keyframes pd-wave-left{
  0%,100%{transform:perspective(90px) rotateY(0deg) skewY(0deg) scaleX(1)}
  22%{transform:perspective(90px) rotateY(-17deg) skewY(-5deg) scaleX(.91)}
  49%{transform:perspective(90px) rotateY(10deg) skewY(3deg) scaleX(1.02)}
  73%{transform:perspective(90px) rotateY(-11deg) skewY(-2deg) scaleX(.95)}
}
@keyframes pd-spark{0%,100%{opacity:0;transform:translateY(8px) scale(.6)}
  45%{opacity:.85;transform:translateY(-10px) scale(1)}
  60%{opacity:.5;transform:translateY(-16px) scale(.9)}}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  /*.pd-flag--l.pd-a2,.pd-flag--r.pd-a2{display:none;}*/
  .pd-bunt{width:30px;}
  .pd-tri{width:19px;height:14px;}
  .pd-flag svg{width:30px;}
  .pd-top-bunt .pd-tri{width:17px;height:15px;}
  .pd-top-bunt .pd-tri:nth-child(n+21){display:none;}
  /*.pd-bunt .pd-tri:nth-child(n+5){display:none;}*/
  .pd-flag--r{
    right: 28px !important;
  }
}
/* ---------- mobile: keep the frame, drop the furniture ---------- */
@media (max-width:640px){
  .di-loader-scene{padding:70px 14px 21px;}
  .di-loader-flag{left:calc(50% + 50px);width:59px;height:45px;}
  .pd-glow--l,.pd-glow--r{width:26px;}
  /*.pd-rail{display:none;}*/
  /*.pd-flag--l,.pd-flag--r{display:none;}*/
  .pd-bunt{top:5px;bottom:5px;width:24px;}
  /*.pd-bunt .pd-tri:nth-child(n+4){display:none;}*/
  .pd-tri{width:15px;height:11px;}
  .pd-bunt--l .pd-tri{margin-left:5px;}
  .pd-bunt--r .pd-tri{margin-right:5px;}
  /*.pd-bunt--l,.pd-bunt--l::before{left:4px;}*/
  /*.pd-bunt--r,.pd-bunt--r::before{right:4px;}*/
  .pd-pole{height:36px;}
  .pd-flag svg{width:27px;}
  .pd-top-bunt{height:27px;border-top-width:1px;}
  .pd-top-bunt .pd-tri{width:12px;height:10px;margin-top:1px;}
  .pd-top-bunt .pd-tri:nth-child(odd){margin-top:3px;}
  .pd-top-bunt .pd-tri:nth-child(n+15){display:none;}
  /*.pd-spark:nth-child(n+5){display:none;}*/
  .pd-frame::after{inset:4px;}

  .pd-top-bunt--r,
  .pd-top-bunt--l{
    top: -2px !important;
  }
}
/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .pd14 *{animation:none !important;transition:none !important;}
  .pd-glow{opacity:.5;}
  .pd-spark{opacity:.45;}
}
@media print{.pd14{display:none;}}